<template>
  <view
      class="w-full fixed bottom-0 left-0 right-0 z-[9999] flex justify-center items-end shadow-[0rpx_6rpx_28rpx_0rpx_rgba(0,0,0,0.15)]"
      :style="{'padding-bottom' : `${safeAreaHeight}px`,'background-color': backgroundColor,'height': `${backgroundHeight}rpx`}">
    <slot name="btn">
      <uv-button :custom-style="customStyle" :loading="loading" :disabled="disabled" @click.stop="handleClick">
        {{ mainButtonText }}
      </uv-button>
    </slot>
  </view>
</template>

<script setup lang="ts">

type PropsType = {
  mainButtonText?: string,
  backgroundColor?: string,
  backgroundHeight?: string | number,
  btnBackgroundColor?: string,
  btnColor?: string,
  btnWidth?: string | number,
  btnHeight?: string | number,
  btnFontSize?: string | number,
  disabled?: boolean,
  loading?: boolean
}
const props = withDefaults(defineProps<PropsType>(), {
  mainButtonText: '确认',
  backgroundColor: '#FFFFFF',
  backgroundHeight: 166,
  btnBackgroundColor: '#FF5500',
  btnColor: '#FFFFFF',
  btnWidth: 710,
  btnHeight: 80,
  btnFontSize: 30,
  disabled: false,
  loading: false
})

const {
  mainButtonText,
  backgroundColor,
  backgroundHeight,
  btnBackgroundColor,
  btnColor,
  btnWidth,
  btnHeight,
  btnFontSize,
  disabled,
  loading
} = toRefs(props)

const emit = defineEmits(['click'])

const safeAreaHeight = ref<number>(28)

const customStyle = ref<Record<string, any>>({
  'background-color': btnBackgroundColor.value,
  'color': btnColor.value,
  'width': `${btnWidth.value}rpx`,
  'height': `${btnHeight.value}rpx`,
  'font-size': `${btnFontSize.value}rpx`,
  'border-radius': '43rpx',
  'font-weight': 500
})

onLoad(() => {
  const systemInfoSync = uni.getSystemInfoSync()
  safeAreaHeight.value = systemInfoSync.osName === "ios" ? systemInfoSync.safeAreaInsets!.bottom === 0 ? 28 : systemInfoSync.safeAreaInsets!.bottom : 28
})

const handleClick = () => {
  emit('click')
}
</script>

<style lang="scss" scoped>

</style>
